<div class="page animation-fade">
    <div class="page-content container-fluid">
        <div class="row">
            <div class="col-ms-12 col-xs-12 col-md-12">
                <div class="portlet">
                    <div class="portlet-title " id="system_stats" style="color: #666;font-size: 13px;">
                        <script type="text/html" id="system_tpl">
                            <span>系统：{{sys.os}}</span>
                            <span>IP：{{sys.ip}}</span>
                            <span>项目已不间断运行：{{sys.day}}</span>
                        </script>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-ms-12 col-xs-12 col-md-12">
                <div class="portlet">
                    <div class="portlet-title ">
                        <div class="caption">状态</div>
                    </div>
                    <div class="row" style='text-align:center;'>

                        <div class="col-lg-3 col-sm-6 col-xs-12 ">
                            <div class="property-item bgm-green" id="cpu_stats">
                                <script type="text/html" id="cpu_tpl">
                                    <span class="margin-left-15 font-weight-400">CPU使用率</span>
                                    <div class="content-text text-center margin-bottom-0 margin-top-20">
                                    <span class="font-size-60 font-weight-100">

                                            <input type="text" class="knob"
                                                   value="{{cpu.used}}" data-skin="tron" data-thickness="0.1"
                                                   data-width="100"
                                                   data-height="100" data-fgcolor="#06d79c">

                                    </span>
                                    </div>
                                    <span class="margin-left-15 font-weight-400">{{ cpu.coreNumber }} 核心</span>
                                </script>
                            </div>
                        </div>

                        <div class="col-lg-3 col-sm-6 col-xs-12">
                            <div class="property-item bgm-blue" id="memory_stats">
                                <script type="text/html" id="memory_tpl">
                                    <span class="margin-left-15 font-weight-400">内存使用率</span>
                                    <div class="content-text text-center margin-bottom-0 margin-top-20">
                                    <span class="font-size-60 font-weight-100">

                                            <input type="text" class="knob"
                                                   value="{{memory.usageRate}}" data-skin="tron" data-thickness="0.1"
                                                   data-width="100"
                                                   data-height="100" data-fgcolor="#06d79c">
                                    </span>
                                    </div>
                                    <span class="margin-left-15 font-weight-400">{{ memory.used }} / {{ memory.total }}</span>
                                </script>
                            </div>
                        </div>

                        <div class="col-lg-3 col-sm-6 col-xs-12">

                            <div class="property-item bgm-blue" id="swap_stats">
                                <script type="text/html" id="swap_tpl">
                                    <span class="margin-left-15 font-weight-400">交换区使用率</span>
                                    <div class="content-text text-center margin-bottom-0 margin-top-20">
                                    <span class="font-size-60 font-weight-100">
                                            <input type="text" class="knob"
                                                   value="{{swap.usageRate}}" data-skin="tron" data-thickness="0.1"
                                                   data-width="100"
                                                   data-height="100" data-fgcolor="#06d79c">
                                    </span>
                                    </div>
                                    <span class="margin-left-15 font-weight-400">{{ swap.used }} / {{ swap.total }}</span>
                                </script>
                            </div>

                        </div>

                        <div class="col-lg-3 col-sm-6 col-xs-12">
                            <div class="property-item bgm-blue">
                                <span class="margin-left-15 font-weight-400">磁盘使用率</span>
                                <div class="content-text text-center margin-bottom-0 margin-top-20">
                                    <span class="font-size-60 font-weight-100">
                                        <span class="font-size-60 font-weight-100" id="disk_stats">
                                             <script type="text/html" id="disk_tpl">
                                                <input type="text" class="knob"
                                                       value="{{disk.usageRate}}" data-skin="tron" data-thickness="0.1"
                                                       data-width="100"
                                                       data-height="100" data-fgcolor="#06d79c">
                                            </script>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-ms-12 col-xs-12 col-md-12">
                <div class="row" style='text-align:center;'>
                    <div class="col-lg-6 col-sm-6 col-xs-12 ">
                        <div class="portlet">
                            <div class="portlet-title ">
                                <div class="caption">CPU使用率监控</div>
                            </div>
                            <div id="cpu-info" style="width:100%;height:300px;"/>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-6 col-xs-12 ">
                        <div class="portlet">
                            <div class="portlet-title ">
                                <div class="caption">内存使用率监控</div>
                            </div>
                            <div id="memory-info" style="width:100%;height:300px;"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

<style>

    .portlet {
        margin-top: 0px;
        margin-bottom: 10px;
        border-radius: 0;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #e7ecf1 !important;
    }

    .portlet .portlet-title {
        border-radius: 4px 4px 0 0;
        padding: 0;
        border-bottom: 0;
        border-bottom: 1px solid #eef1f5;
    }

    .portlet .portlet-title .caption {
        color: #666;
        padding: 0;
        line-height: 26px;
        font-size: 14px;
    }

    .portlet span {
        margin-right: 28px;
    }
</style>
<script type="text/javascript">

    $.namespace('Page.Monitor');

    Page.Monitor = function () {
        var timeCategory = [], cpuSeries = [], memorySeries = [];
        var cpuChart = echarts.init(document.getElementById('cpu-info'));
        var memoryChart = echarts.init(document.getElementById('memory-info'));
        return {
            initCpuChart: function () {
                cpuChart.setOption(option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 20
                    },
                    series: [{
                        data: [],
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: 'rgb(32, 160, 255)' // 改变区域颜色
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#6fbae1',
                                lineStyle: {
                                    color: '#6fbae1' // 改变折线颜色
                                }
                            }
                        }
                    }]
                })
            },
            initMemoryChart: function () {
                memoryChart.setOption(option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        interval: 20
                    },
                    series: [{
                        data: [],
                        type: 'line',
                        areaStyle: {
                            normal: {
                                color: 'rgb(32, 160, 255)' // 改变区域颜色
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: '#6fbae1',
                                lineStyle: {
                                    color: '#6fbae1' // 改变折线颜色
                                }
                            }
                        }
                    }]

                });
            },
            initData:function () {
                Bolt.ajax('doajax', {
                    url: '${base}/admin/sys/monitor/info',
                    cache: false,
                    loadingMask: false,
                    okCallback: function (data) {

                        var system_html = template('system_tpl', data);
                        $('#system_stats').empty().html(system_html);
                        var cpu_html = template('cpu_tpl', data);
                        $('#cpu_stats').empty().html(cpu_html);
                        var memory_html = template('memory_tpl', data);
                        $('#memory_stats').empty().html(memory_html);
                        var swap_html = template('swap_tpl', data);
                        $('#swap_stats').empty().html(swap_html);
                        var disk_html = template('disk_tpl', data);
                        $('#disk_stats').empty().html(disk_html);
                        $(".knob").knob();

                        if (timeCategory.length >= 8) {
                            timeCategory.shift();
                            memorySeries.shift();
                            cpuSeries.shift();
                        }
                        timeCategory.push(data.time);
                        cpuSeries.push(data.cpu.used);
                        memorySeries.push(data.memory.usageRate);
                        cpuChart.setOption({xAxis: {data: timeCategory}, series: [{data: cpuSeries}]});
                        memoryChart.setOption({xAxis: {data: timeCategory}, series: [{data: memorySeries}]});

                    }
                });
            },
            init: function () {
                Page.Monitor.initCpuChart();
                Page.Monitor.initMemoryChart();
                setTimeout(Page.Monitor.initData, 5*1000);
            }
        }
    }();

    $(document).ready(function () {
        Page.Monitor.init();
    });
</script>